<!--数据源配置-->
<!--created by lx 2023/6/8-->
<template>
  <div class="list-card-container">
    <a-card title="数据源配置" class="general-card">
      <!-- 新增 -->
      <AddDrawer
        clickword="新增"
        title="新增配置"
        narrow
        :data-source="CONFIG_FORM"
        style="margin-bottom: 16px"
        @change="addConfig"
      />
      <!-- 表格 -->
      <a-table
        :columns="COLUMNS_CONFIG"
        :data="configList"
        row-key="id"
        :loading="loading"
        :scroll="{ x: '1000px' }"
      >
        <!--插槽：自动复制-->
        <template #tooltip="{ record }">
          <QuickcopyTooltip :show-text="record.url" show-btn />
        </template>

        <!--插槽，操作-->
        <template #operation="{ record }">
          <!--主配置不允许修改和删除-->
          <a-space v-if="record.id === 0">
            <a-link disabled>不可操作</a-link>
          </a-space>
          <a-space v-else>
            <AddDrawer
              :data-source="CONFIG_FORM"
              :data-record="record"
              title="修改配置"
              clickword="修改"
              narrow
              click="link"
              @change="(req) => editConfig(req, record)"
            />
            <a-popconfirm
              content="确定删除该数据源吗？"
              type="warning"
              @ok="deleteConfig(record)"
            >
              <a-link> 删除 </a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import {
    queryDataSourceRecord,
    saveDataSourceRecord,
    updateDataSourceRecord,
    removeDataSourceRecord,
  } from '@/api/infrastructure/data-source-config';
  import { ref, onMounted } from 'vue';
  import AddDrawer from '@/common/components/cac-components/advanced-drawer/index.vue';
  import QuickcopyTooltip from '@/common/components/cac-components/quickcopy-tooltip/index.vue';
  import {
    DataSourceRecord,
    DataSourceReqRecord,
  } from '@/api/infrastructure/model/dataSourceConfigModel';

  const loading = ref<boolean>(false);

  // func: 查询数据源配置
  const searchConfig = async () => {
    loading.value = true;
    try {
      const { data } = await queryDataSourceRecord();
      configList.value = data;
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    searchConfig();
  });

  // 表格
  const configList = ref<DataSourceRecord[]>([]);
  const COLUMNS_CONFIG: TableColumnData[] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      width: 80,
      render: ({ rowIndex }) => rowIndex + 1,
      fixed: 'left',
    },
    {
      title: '数据源名称',
      dataIndex: 'name',
      width: 120,
      ellipsis: true,
    },
    {
      title: '数据源连接',
      dataIndex: 'url',
      width: 300,
      slotName: 'tooltip',
      ellipsis: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width: 90,
    },
    { title: '创建时间', dataIndex: 'createTime', width: 180 },
    {
      title: '操作',
      dataIndex: 'operation',
      slotName: 'operation',
      width: 120,
      align: 'center',
      fixed: 'right',
    },
  ];

  const CONFIG_FORM = [
    {
      labelText: '数据源名称',
      fieldName: 'name',
      col: 24,
      required: true,
      type: 'text',
    },
    {
      labelText: '数据源连接',
      fieldName: 'url',
      col: 24,
      textrow: 4,
      required: true,
      type: 'text',
    },
    {
      labelText: '用户名',
      fieldName: 'username',
      col: 24,
      required: true,
      type: 'text',
    },
    {
      labelText: '密码',
      fieldName: 'password',
      col: 24,
      required: true,
      type: 'password',
    },
  ];

  const addConfig = async (req: DataSourceReqRecord) => {
    try {
      await saveDataSourceRecord(req);
      Message.success('新增成功');
    } finally {
      searchConfig();
    }
  };
  const editConfig = async (
    req: DataSourceReqRecord,
    record: DataSourceRecord
  ) => {
    try {
      await updateDataSourceRecord({ ...req, id: record.id });
      Message.success('修改成功');
    } finally {
      searchConfig();
    }
  };

  // func: 下线一条记录
  const deleteConfig = async (row: DataSourceRecord) => {
    try {
      await removeDataSourceRecord(row.id as string);
      Message.success('操作成功');
    } finally {
      searchConfig();
    }
  };
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    border-radius: var(--border-radius-default);
  }
</style>
